<template>
  <el-carousel :interval="1000" type="card" height="400px" class="my-col-md-12">
    <el-carousel-item class="my-col-md-4">
      <div class="my-col-md-8 photo image-container" style="margin: 10px 40px">
        <!-- Ensure that `teacher.photoUrl` is spelled correctly -->
        <a href="#">
          <img src="../assets/107毛泽东主席.jpg" style="width: 100%; height: auto" />
        </a>
        <h4 style="text-align: center" class="text-overlay">毛泽东</h4>
      </div>
    </el-carousel-item>
    <el-carousel-item class="my-col-md-4">
      <div class="my-col-md-8 photo image-container" style="margin: 10px 40px">
        <!-- Ensure that `teacher.photoUrl` is spelled correctly -->
        <a href="#">
          <img src="../assets/108周恩来总理.jpg" style="width: 100%; height: auto" />
        </a>
        <h4 style="text-align: center" class="text-overlay">周恩来</h4>
      </div>
    </el-carousel-item>
    <el-carousel-item class="my-col-md-4">
      <div class="my-col-md-8 photo image-container" style="margin: 10px 40px">
        <!-- Ensure that `teacher.photoUrl` is spelled correctly -->
        <a href="#">
          <img src="../assets/109叶挺将军.jpg" style="width: 100%; height: auto" />
        </a>
        <h4 style="text-align: center" class="text-overlay">叶挺</h4>
      </div>
    </el-carousel-item>
    <el-carousel-item class="my-col-md-4">
      <div class="my-col-md-8 photo image-container" style="margin: 10px 40px">
        <!-- Ensure that `teacher.photoUrl` is spelled correctly -->
        <a href="#">
          <img src="../assets/110陈独秀.jpg" style="width: 100%; height: auto" />
        </a>
        <h4 style="text-align: center" class="text-overlay">陈独秀</h4>
      </div>
    </el-carousel-item>
    <el-carousel-item class="my-col-md-4">
      <div class="my-col-md-8 photo image-container" style="margin: 10px 40px">
        <!-- Ensure that `teacher.photoUrl` is spelled correctly -->
        <a href="#">
          <img src="../assets/111李大钊.jpg" style="width: 100%; height: auto" />
        </a>
        <h4 style="text-align: center" class="text-overlay">李大钊</h4>
      </div>
    </el-carousel-item>
    <el-carousel-item class="my-col-md-4">
      <div class="my-col-md-8 photo image-container" style="margin: 10px 40px">
        <!-- Ensure that `teacher.photoUrl` is spelled correctly -->
        <a href="#">
          <img src="../assets/106孙中山先生.jpg" style="width: 100%; height: auto" />
        </a>
        <h4 style="text-align: center" class="text-overlay">孙中山</h4>
      </div>
    </el-carousel-item>
  </el-carousel>
</template>

<style scoped>
@import '@/modules/moules1/modules1_BigRevelution/assets/main.css';
</style>

<style scoped>
.el-carousel__item {
  color: #475669;
  opacity: 0.75;
  margin: 0;
  text-align: center;
  height: 400px;
}

.el-carousel__item:nth-child(2n) {
  background-color: white;
  opacity: 0.75;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.image-container {
  /* position: relative; */
  /* 设置为相对定位 */
  display: inline-block;
  /* 或者block，根据需要 */
}
/* 了解更多 */
.note {
  display: inline-block;
  color: #d3d3d3;
  font-weight: lighter;
  position: absolute;
  right: 0;
}
.note:hover {
  color: black;
}
/* 文字 */
.text-overlay {
  color: black;
}

/*照片框*/
.photo_border {
  /* border: 1px solid #D3D3D3; */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  height: 100%;
}

.photo {
  /* border: 1px solid #D3D3D3; */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
  /* 平滑过渡效果 */
  transform: translateY(0);
  /* 初始状态，不移动 */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  /* 普通状态下轻微阴影 */
}

.photo:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  /* 悬浮时的阴影设置 */
  transform: translateY(-10px);
  /* 鼠标悬浮时向上移动 */
}

.border {
  /* border: 1px solid #D3D3D3; */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
  /* 平滑过渡效果 */
  transform: translateY(0);
  /* 初始状态，不移动 */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  /* 普通状态下轻微阴影 */
  margin: 10px 0;
}
/*.border:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transform: translateY(-10px);
  } */
/* 标题 */
.title {
  background-color: red;
  color: white;
  border-top-right-radius: 10px;
  box-sizing: border-box;
  display: inline-block;
  padding: 5px 10px;
  margin: 2px 0px;
}
</style>
